<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue输入内容绑定</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>单行文本框:</h3>
        <input type="text" name="" id="" placeholder="username" v-model.lazy.trim="username">
        <span>{{username}}</span>

        <h3>多行文本框：</h3>
        <textarea name="" v-model="content" id="" cols="30" rows="10"></textarea>
        <p>{{content}}</p>

        <h3>复选框：选择喜欢的水果</h3>
        <span v-for="item in fruits">            
            <input type="checkbox" name=""  name="fruit" :value="item" v-model="checkFruits">
            {{item}}
        </span>
        <p>{{checkFruits}}</p>

        <h3>单选框：选择最喜欢的水果</h3>
        <span v-for="item in fruits">            
            <input type="radio" name=""  name="fruit" :value="item" v-model="radioFruits">
            {{item}}
        </span>
        <p>{{radioFruits}}</p>

        <h3>选项框：选择你居住的城市</h3>
        <select name="" v-model="selectCity">
            <option disabled value="">---请选择---</option>
            <option v-for="item in citys" :value="item">{{item}}</option>
        </select>
        <p>{{selectCity}}</p>

        
        <h3>选项框：选择你喜欢的城市</h3>
        <select name="" v-model="loveCitys" multiple="multiple">            
            <!-- <option disabled value=""></option> -->
            <option v-for="item in citys" :value="item">{{item}}</option>
        </select>
        <p>{{loveCitys}}</p>

        <h3>将字符串转变为数字获取:</h3>
        <input type="text" name="age" id="" placeholder="age" v-model.number.lazy="age">
        <span>{{age}}</span>
    </div>

    <script>
        let app=new Vue({
          el:"#app",
          data:{
              username:'',
              content:'',
              fruits:[
                  '苹果','香蕉','雪梨','杨桃','西瓜','殷桃','芒果'
              ],
              checkFruits:[],
              radioFruits:"",
              citys:['北京','广州','深圳','成都','重庆','杭州','上海'],
              selectCity:"",  
              loveCitys:[],
              age:16
          },
          methods:{

          },
          watch:{
              age:function(val){
                  console.log(val)
              }
          }
        })
    </script>
</body>
</html>